<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DatePicker</title>
    <link rel="stylesheet" href="./css/datepicker.css">

    <style>
        .datepicker {
            border: 1px #ccc solid;
            border-radius: 4px;
            padding: 5px;
            height: 24px;
            line-height: 24px;
            width: 230px;
        }
        .datepicker:focus {
            outline: 0 none;
            border: 1px #1abc9c solid;
        }
        .ui-datepicker-wrapper {
            display: block;
        }
    </style>

</head>
<body style="padding: 200px 300px 300px 300px">

    <input type="text" class="datepicker">

    <div class="ui-datepicker-wrapper">

        <div class="ui-datepicker-header">

            <div class="ui-datepicker_ym ui-datepicker_y" id="ui-datepicker_YY">
                <a class="ui-datepicker_choose ui-datepicker_chprev "><cite></cite></a>
                <input id="ui-datepicker_y" readonly="" value="2017年">
                <label></label>
                <a class="ui-datepicker_choose ui-datepicker_chnext "><cite></cite></a>

                <div class="ui-datepicker_ys ">
                    <a class="ui-datepicker_tab ui-datepicker_chtop"><cite></cite></a>
                    <ul id="ui-datepicker_ys">
                        <li y="2010">2010年</li>
                        <li y="2011">2011年</li>
                        <li y="2012">2012年</li>
                        <li y="2013">2013年</li>
                        <li y="2014">2014年</li>
                        <li y="2015">2015年</li>
                        <li y="2016">2016年</li>
                        <li class="ui-datepicker_click" y="2017">2017年</li>
                        <li y="2018">2018年</li>
                        <li y="2019">2019年</li>
                        <li y="2020">2020年</li>
                        <li y="2021">2021年</li>
                    </ul>
                    <a class="ui-datepicker_tab ui-datepicker_chdown"><cite></cite></a>
                </div>

            </div>

            <div class="ui-datepicker_ym ui-datepicker_m" id="ui-datepicker_MM">
                <a class="ui-datepicker_choose ui-datepicker_chprev ui-datepicker_tab"><cite></cite></a>
                <input id="ui-datepicker_m" readonly="" value="06月">
                <label></label>
                <a class="ui-datepicker_choose ui-datepicker_chnext ui-datepicker_tab"><cite></cite></a>
                <div class="ui-datepicker_ms " id="ui-datepicker_ms">
                    <span m="0">01月</span>
                    <span m="1">02月</span>
                    <span m="2">03月</span>
                    <span m="3">04月</span>
                    <span m="4">05月</span>
                    <span m="5" class="ui-datepicker_click">06月</span>
                    <span m="6">07月</span>
                    <span m="7">08月</span>
                    <span m="8">09月</span>
                    <span m="9">10月</span>
                    <span m="10">11月</span>
                    <span m="11">12月</span>
                </div>
            </div>

        </div>
        <div class="ui-datepicker-body">
            <table>
                <thead>
                <tr>
                    <th>一</th>
                    <th>二</th>
                    <th>三</th>
                    <th>四</th>
                    <th>五</th>
                    <th>六</th>
                    <th>七</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>29</td>
                    <td>30</td>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>7</td>
                    <td>8</td>
                    <td>9</td>
                    <td>10</td>
                    <td>11</td>
                    <td>12</td>
                </tr>
                <tr>
                    <td>13</td>
                    <td>14</td>
                    <td>15</td>
                    <td>16</td>
                    <td>17</td>
                    <td>18</td>
                    <td>19</td>
                </tr>
                <tr>
                    <td>20</td>
                    <td>21</td>
                    <td>22</td>
                    <td>23</td>
                    <td>24</td>
                    <td>25</td>
                    <td>26</td>
                </tr>
                <tr>
                    <td>27</td>
                    <td>28</td>
                    <td>29</td>
                    <td>30</td>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                </tr>
                </tbody>
            </table>
        </div>

        <div class="ui-datepicker-footer">
            <div class="ui-datepicker-footerbtn">
                <a href="#" class="ui-datepicker-toDay">今天</a><a href="#" class="ui-datepicker-ok">确认</a>
            </div>
        </div>
    </div>

    <script src="datepicker.js"></script>
    <script>
        //var monthDate = datepicker.getMonthDate();

        //datepicker.init('.datepicker');

        /**
         * 判断年份是否为润年
         *
         * @param {Number} year
         */
        function isLeapYear(year) {
            return (year % 400 == 0) || (year % 4 == 0 && year % 100 != 0);
        }
        /**
         * 获取某一年份的某一月份的天数
         *
         * @param {Number} year
         * @param {Number} month
         */
        function getMonthDays(year, month) {
            return [31, null, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month] || (isLeapYear(year) ? 29 : 28);
        }
        /**
         * 获取某年的某天是第几周
         * @param {Number} y
         * @param {Number} m
         * @param {Number} d
         * @returns {Number}
         */
        function getWeekNumber(y, m, d) {
            var now = new Date(y, m - 1, d),
                year = now.getFullYear(),
                month = now.getMonth(),
                days = now.getDate();
            //console.log(year)
            //console.log(month)
            //console.log(days)
            //那一天是那一年中的第多少天
            for (var i = 0; i < month; i++) {
                days += getMonthDays(year, i);
            }

            //那一年第一天是星期几
            var yearFirstDay = new Date(year, 0, 1).getDay() || 7;
            //console.log(yearFirstDay)

            var week = null;
            if (yearFirstDay == 1) {
                week = Math.ceil(days / 7);
            } else {
                days -= (7 - yearFirstDay + 1);
                week = Math.ceil(days / 7) + 1;
            }

            return week;
        }

        console.log(getWeekNumber(2018,1,8))

    </script>
</body>
</html>